<template>
  <div class="children-a-container">
    <span>vuex使用 - 子组件A</span>
    <div class="info">
      <div>数据{{ vegetables }}</div>
      <div>{{$store.state.count}}</div>
      <div>  获取的性别数据{{genderbos}}</div>
      <ul>
        <li>name:{{ name }}</li>
        <li>age:{{ age }}</li>
        <li>friend:{{ friend }}</li>
        <li>快递:{{ msg }}</li>
      </ul>
    </div>
    <div class="control">
      <button @click="changeName">修改数据</button>
    </div>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'children-a',
  data () {
    return {
      vegetables: ['西兰花', '鸡蛋', '花菜'],
      msg: ''
    }
  },
  created () {
    this.$eventBus.$on('send', (message) => {
      this.msg = message
    })
  },
  methods: {
    changeName () {
      // this.$store.state.name = '中华小当家'
      // 触发 mutation
      // 不传参
      // this.$store.commit('changeName')
      // 传参
      this.$store.commit('changeName', '海绵宝宝')
    }
  },
  computed: {
    ...mapGetters(['genderbos']),
    ...mapState(['name', 'age', 'friend'])
    // 返回一个对象,内部已经设置好了计算属性取值
  }
}
</script>

<style lang="less">
.children-a-container {
  height: 40vh;
  width: 30vw;
  background-color: yellowgreen;
  padding: 15px;

  .control {
    padding: 10px;
    button {
      border: none;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 5px;
      &:hover {
        background-color: #e7e7e7;
      }
    }
  }
}
</style>
